<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--
      Note that our build process will rewrite this 'href' value to a copy
      of the file that has a hash in it.
    -->

    <link rel="icon" href="%PUBLIC_URL%/favicon-48x48.png" />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />

    <meta name="theme-color" content="#ffffff" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link
      rel="search"
      type="application/opensearchdescription+xml"
      href="/opensearch.xml"
      title="MDN Web Docs"
    />

    <script>
      // Only include the polyfill for browsers that seem to not have
      // certain JS features. E.g. Firefox 58.
      if (!Array.prototype.flat || !Array.prototype.includes) {
        document.write(
          '<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.flat%2Ces6"><\/script>'
        );
      }
    </script>

    <title>MDN Web Docs</title>
    <meta
      name="description"
      content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
    />

    <!--
      Why these Open Graph meta tags? ...when the '<title>' and '<meta name=description>'
      already exist?
      Well, because of Twitter.
      When you paste in an MDN URL into Twitter it will not make a "card".
      See this comment: https://github.com/mdn/yari/issues/3590#issuecomment-825153396

      According to Twitter's documentation on "Cards" they will use their proprietary
      tags (e.g. `<meta name="twitter:card" content="summary">`) but if not available
      they will fall back to Open Graph meta tags.
      See https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph

      It is a lot of repetition and additional bloat to the index.html files. But
      keep in mind that repeated strings of texts compresses very well and most
      clients will only download the Gzip or Brotli compressed HTML file.

      Remember, all of these are *default* values. The actual values are processed in
      ssr/render.js and uses cheerio to replace the content on all of these.
    -->
    <meta property="og:url" content="https://developer.mozilla.org" />
    <meta property="og:title" content="MDN Web Docs" />
    <meta
      property="og:description"
      content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
    />
    <meta property="og:locale" content="en-US" />
    <meta property="og:image" content="%PUBLIC_URL%/mdn-social-share.png" />
    <meta property="twitter:card" content="summary_large_image" />

    <link rel="canonical" href="https://developer.mozilla.org" />
    <style media="print">
      .breadcrumbs-container,
      .language-toggle,
      .document-toc-container,
      .on-github,
      nav.sidebar,
      .top-navigation-main,
      .page-footer,
      ul.prev-next,
      .language-menu {
        display: none !important;
      }
      .main-page-content,
      .main-page-content pre {
        padding: 2px;
      }
      .main-page-content pre {
        border-left-width: 2px;
      }
    </style>
  </head>
  <body>
    <script>
      const c = { light: "#ffffff", dark: "#15141a" };
      if (window && document.body) {
        const o = window.localStorage.getItem("theme");
        o &&
          ((document.body.className = o),
          (document.body.style.backgroundColor = c[o]));
      }
    </script>
    <div id="root"></div>
  </body>
</html>
